<template>
	<div>
		<div class="container">
		 <div class="handle-box">
			<div class = "btn-group">
                <el-button color="#2388c5"  @click="open">添加</el-button>
		   </div>
           </div>

        <el-table
				v-loading="loading"
				:data="menuAction"
				highlight-current-row
				:tree-props="{
				children: 'children',
				hasChildren: 'hasChildren',
				}"
				row-key="id"
				default-expand-all
				border
				size="small"
				@row-click="onRowClick"
				:header-cell-style="{color:'#2A62BC'}"
      >
        <el-table-column label="菜单名称" min-width="200">
          <template #default="scope">
            {{ scope.row.menuName }}
          </template>
            </el-table-column>
            <el-table-column prop="url" label="菜单URL"></el-table-column>
            <el-table-column fixed="right" align="left" label="操作" width="220">
            <template #default="scope">
                <el-button-group v-if="scope.row.pid!=0" >
                    <el-tooltip   content="修改" placement="top" effect="light" >
                        <el-button text :icon="Edit" @click="open(scope.$index,scope.row)" ></el-button>
                    </el-tooltip> 
                        <el-tooltip content="删除" placement="top" effect="light" >
                            <el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)" ></el-button>
                        </el-tooltip> 
                        <el-tooltip content="预置行为分配" placement="top" effect="light" >
                            <el-button text   @click="allocationAction(scope.$index,scope.row)"><i class="iconfont icon-share4 blue"></i></el-button>
                        </el-tooltip>    
                
                </el-button-group>
                <el-button-group v-else>
                    <el-tooltip   content="修改" placement="top" effect="light" >
                        <el-button text :icon="Edit" @click="open(scope.$index,scope.row)"></el-button>
                    </el-tooltip>
                    <el-tooltip content="删除" placement="top" effect="light" >
                            <el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)" ></el-button>
                    </el-tooltip> 
             
                </el-button-group>
                

          </template>
        </el-table-column>
		</el-table>
       <!-- 编辑或者添加的弹出框 -->
		<el-dialog :title="titleEdit" v-model="editVisible" width="30%" >
			<el-form label-width="70px">
				<!-- <el-form-item label="编号" disabled >
					<el-input v-model="form.stuId"  :disabled="isDisable" ></el-input>
				</el-form-item> -->
				<el-form-item label="菜单名">
					<el-input v-model="form.menuName" :disabled="isDisable"></el-input>
				</el-form-item>
				<el-form-item label="上级菜单">
					<!-- <el-input v-model="form.pid"></el-input> -->
                    <el-select v-model="form.pid" class="m-2" 
                    placeholder="Select" 
                    size="large">
                    <el-option
                            v-for="group in options.pMenus"
                            :value="group.value"
                            :key="group.label"
                            :label="group.label"
                            >
                        
                    </el-option>
                        </el-select>
				</el-form-item>
                <el-form-item label="菜单描述">
					<el-input v-model="form.description" type="textarea"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">关闭</el-button>
					<el-button color="#2388c5" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>


		<!-- 分配行为弹出框 -->
		<el-dialog title="分配行为" v-model="dialogVisible1" width="30%">
			<el-form label-width="85px">
                <!-- <el-form-item label="权限名称" >
					<el-select
                     v-model="form1.privlege" 
                        filterable
                        allow-create
			   >
				<el-option
					v-for="item in options.privleges"
					:key="item.value"
					:label="item.label"
					:value="item.value"
					/>
			</el-select>
				</el-form-item> -->
				<el-form-item label="菜单名称" >
					<el-input v-model="form1.menuName" disabled></el-input>
				</el-form-item>
				<el-form-item label="包含行为" > 
					<el-tree
						ref="treeRef"
						:data="data"
						show-checkbox
						node-key="id"
						:props="defaultProps"
					/>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible1 = false">关闭</el-button>
					<el-button color="#0EB594" @click="saveGroup">保存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
	</div>
</template>

<script setup  name="adminList">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import {getMenuAction} from '../../api/privlege';

// 选择表格的行菜单ID
const selectedRowMenuId = ref();
/**行点击事件 */
function onRowClick(row) {
  selectedRowMenuId.value = row.id;
}
const loading = ref(false);
const menuAction = ref([
	{
		id: 1,
		menuName: "系统配置",
		pid: 0,
		url: "系统配置",
		children:[
			{
			"id": 4,
			"pid": 1,
			"menuName": "参数信息",
			"url": "参数信息"
			},
			{
			"id": 5,
			"pid": 1,
			"menuName": "资料配置",
			"url": "资料配置"
			},
			{
			"id": 6,
			"pid": 1,
			"menuName": "数据库备份",
			"url": "数据库备份"}
		]
	},
	{
    "id": 2,
    "pid": 0,
    "menuName": "用户管理",
    "url": "用户管理",
	children:[
	{
    "id": 7,
    "pid": 2,
    "menuName": "管理员管理",
    "url": "管理员管理"
  },
  {
    "id": 8,
    "pid": 2,
    "menuName": "学生管理",
    "url": "学生管理"
  },
	]
  },
  {
    "id": 3,
    "pid": 0,
    "menuName": "权限管理",
    "url": "权限管理",
	children:[
	{
    "id": 9,
    "pid": 3,
    "menuName": "用户组管理",
    "url": "用户组管理"
  },
  {
    "id": 10,
    "pid": 3,
    "menuName": "角色管理",
    "url": "角色管理"
  },
  {
    "id": 11,
    "pid": 3,
    "menuName": "角色权限",
    "url": "角色权限"
  }
	]
  },

]);

const options = reactive({
    privleges:[
    {
		value: '测试权限',
		label: '测试权限',
 	 },
    {
		value: '教务权限',
		label: '教务权限',
 	 },
    {
		value: '咨询权限',
		label: '咨询权限',
 	 },
    {
		value: '教师权限',
		label: '教师权限',
 	 },
    {
		value: '管理员权限',
		label: '管理员权限',
 	 },
    ],
    pMenus:[
        {
            value: '系统配置',
            label: '系统配置',
 	    },
         {
            value: '用户管理',
            label: '用户管理',
 	    },
    ]
})

//表格数据
const tableData = ref();
// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
	// loading.value = true
    getMenuAction().then(({data})=>{
        console.log(data,"---data---")
        // 数据处理
	//    data.map(item=>{
	// 		console.log('====Menuitem====',item)
			
			
	// 	})
       // tableData.value = res.data
        
    })
	
};
getData();

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
    id:'',
	menuName: '',
	description:'',
    pid:''
});


let titleEdit = ref('修改')
let isDisable = ref(true)
const open  = (index,row)=>{//index是时间源对象
	if(row){
		isDisable.value=true
		titleEdit.value = "修改"
		handleEdit(index,row)
	}else{
		//把第一个输出改为可编辑
		isDisable.value=false
		//清空表单中的数据
		titleEdit.value = "添加"
		form.menuName=''
        form.description=''
        form.pid=''
		editVisible.value = true	
	}
	console.log('-------测试传值-------')
	// console.log(index,row,index.target.innerText)
	// console.log(index,row)
	// console.log('================')

}
let idx= -1;
const handleEdit = (index, row) => {
	idx = index;
	form.pid = row.pid
    form.menuName = row.menuName
	editVisible.value = true;
};
//保存添加或者修改的数据 to---需要重新实现
const saveEdit = () => {
	editVisible.value = false;
	ElMessage.success(`修改第 ${idx + 1} 行成功`);
	tableData.value[idx].menuName = form.menuName;
    tableData.value[idx].pid = form.pid
    tableData.value[idx].description = form.description

};


//删除
// 删除单个操作
const handleDelete = (index) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
	.then(() => {
		ElMessage.success('删除成功');
		//to.... 传递id 到后台 
		tableData.value.splice(index, 1);
		// 删除成功后
		// getData()
	})
	.catch(() => {});
};




//分配行为的弹框
const dialogVisible1 = ref(false);
const form1  = reactive({
	menuName:'',
    privlege:'',
})
const  treeRef = ref()

//分配回显
const allocationAction =(index,row)=>{
  console.log(index,"role");
  form1.menuName = row.menuName
  dialogVisible1.value = true
	
}
//保存用户分组信息
const  saveGroup=()=>{
	//拿到被选中的用户组
	console.log(treeRef.value.getCheckedNodes(false, false))
	//获取被选中节点的id
	console.log(treeRef.value.getCheckedKeys(false))
   //to ...
}

//树形状控件
const defaultProps = {
  children: 'children',
  label: 'label',
}
// 分组数据目前是死的  可以同axios请求 从后台获取  
const data = [
  {
    id: 1,
    label: '包含行为',
    children: [
		{
            id: 2,
            label: '发送有邮件',
        },
		{
            id: 3,
            label: '跟进记录',
        },
		{
            id: 4,
            label: '分配客户',
        },
		{
            id: 5,
            label: '签约',
        },
		{
            id: 6,
            label: '转班记录',
        },
		{
            id: 7,
            label: '拒绝请假',
        },
		{
            id: 8,
            label: '评价',
        },
		{
            id: 9,
            label: '审批',
        },
		{
            id: 10,
            label: '批改',
        },
		{
            id: 11,
            label: '详情',
        },
	],
  },
  

  
]

</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
     
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 196px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.blue {
	color: #1296e2;
	font-weight: bold;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.cell{
    display: inline-block;
    .el-button{
        margin-left: 0px;
    }
}

.btn-group{
    float: right;
}
</style>
